import React, { useState, useEffect } from 'react';

import { Row, Col } from 'antd';
import { Input, Modal } from 'antd';
import { DatePicker, Space } from 'antd';
import { Select } from 'antd';
import { Button, Menu, Dropdown, Form, Radio } from 'antd';
const { RangePicker } = DatePicker;
import { Table } from 'antd';
const { Option } = Select;
import { history } from 'umi';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

import { FormInstance } from 'antd/lib/form';
import request from '../../../http';

//李鸿 管理员 学员信息管理

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    yx: `软件学院 `,
    zy: `计算机科学与技术 `,
    nj: `2007 `,
    bj: `一班 `,
    bzr: `张XX `,
    xyxm: `张三 `,
    xh: `1111 `,
    sfzhm: `500109 `,
    xb: `女 `,
    yox: `女 `,
    sjh: `500109 `,
    xmjs: `500109 `,
  });
}

const xygl = () => {
  //初始化页码
  const [pagination, setPagination] = React.useState({
    current: 1,
    total: 1,
    pageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '200', '500'],
  });

  const loadDataSource = (parms: any) => {
    request.get('/studentManage/admin/QueryAllClassInfo').then(
      (result: any) => {
        console.log(result);
        // 这里是响应成功返回的数据，把上面的response打印出来的时候，就会得到以下结果
        // config: {url: "请求的地址"}，这是一个配置文件
        // headers: 请求头信息
        // data: (100) 返回响应的数据
        // request: ajax相关的请求信息
        // status: 200；响应状态
        // statusText: "OK"
        // 判断响应状态
        if (result.success) {
          //获得成功响应返回的数据
          console.log('数据', result.data);

          const data4 = result.data.map((item: any) => ({
            key: `p_${item.id}`,
            yx: item.faculty,
            zy: item.profession,
            nj: item.grade,
            bj: item.name,
            bzr: item.userName,
            sfyjy: item.isGraduated,
            xyzs: item.totalMember,
          }));
          console.log(result.data[0]);

          setgGrade(result.data[0].grade);
          setgClassInfoId(result.data[0].id);

          //获取分页请求的数据
          /* const newPageObject = {
              ...pagination,
              current: parms.page,
              pageSize: parms.number,
              total: result.data.paginationData.sum,
            };

            //放分页的数据
            setPagination(newPageObject);*/

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
  };

  //填入数据获取值
  const [gStudentName, setgStudentName] = useState([{}]);
  const [gNumber, setgNumber] = useState([{}]);
  const [gNumberId, setgNumberId] = useState([{}]);
  const [gMailBox, setgMailBox] = useState([{}]);
  const [gTelNumber, setgTelNumber] = useState([{}]);
  const [gProjectRole, setgProjectRole] = useState([{}]);
  const [gSex, setgSex] = useState([{}]);
  const [gGrade, setgGrade] = useState([{}]);
  const [gClassInfoId, setgClassInfoId] = useState([{}]);

  //搜索请求数据
  const [ProjectRole, setProjectRole] = useState([{}]);

  //周期搜索
  React.useEffect(() => {
    const parms = {
      //请求参数
      number: pagination.pageSize, //一页10行
      page: pagination.current, //第一页
    };
    //抽成一个公共方法了
    loadDataSource(parms);

    //项目请求
    request.get('/studentManage/admin/AdminGetAllRole').then((res) => {
      console.log('项目角色请求成功了', res.data);
      setProjectRole(res.data);
    });
  }, []);
  const [Data2, setData2] = React.useState();

  //改变页码，页码条数接口的事件
  //绑分页接口
  /*const pageOnChange =  (page: any) => {
    const parms = {
      //请求参数
      number: page.pageSize,//一页10行
      page: page.current,//第一页

    };
    //调接口
    loadDataSource(parms);
  };*/

  //获取表单的数据
  const onSubmit = (value: any) => {
    //获取学生
    console.log(value);
    const parms = {
      ...value,
      //请求参数
      number: pagination.pageSize, //一页10行
      page: pagination.current, //第一页
    };
    loadDataSource(parms);
  };

  function info() {
    Modal.info({
      title: '查看学生',
      content: (
        <div>
          <p>some messages...some messages...</p>
          <p>some messages...some messages...</p>
        </div>
      ),
      onOk() {},
    });
  }
  const columns2 = [
    {
      title: '院系',
      width: 100,
      dataIndex: 'yx',
      key: '1',
      fixed: 'left',
    },
    {
      title: '专业',
      width: 100,
      dataIndex: 'zy',
      key: '2',
      fixed: 'left',
    },
    { title: '年级', dataIndex: 'nj', key: '3' },
    { title: '班级', dataIndex: 'bj', key: '4' },
    { title: '班主任', dataIndex: 'bzr', key: '5' },
    { title: '是否已结业', dataIndex: 'sfyjy', key: '4' },
    { title: '学员总数', dataIndex: 'xyzs', key: '5' },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 250,
      render: (text, record) => (
        <Space size="middle">
          <a onClick={() => history.push('/admin/studentInfo/xygl')}>
            学员明细
          </a>
          {/*<Button type="link" onClick={info}>
            学员明细
      </Button>*/}
          <Button type="link" onClick={info}>
            编辑
          </Button>
        </Space>
      ),
    },
  ];

  const data2 = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 40,
      address: 'London Park',
    },
  ];

  const [form] = Form.useForm();
  const onGenderChange = (value: string) => {
    switch (value) {
      case 'male':
        form.setFieldsValue({ note: 'Hi, man!' });
        return;
      case 'female':
        form.setFieldsValue({ note: 'Hi, lady!' });
        return;
      case 'other':
        form.setFieldsValue({ note: 'Hi there!' });
    }
  };

  const formItemLayout = {
    labelCol: {
      // xs: { span: 24 },
      // sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  //新增
  const submit = () => {
    console.log(
      gStudentName,
      gNumber,
      gNumberId,
      gMailBox,
      gTelNumber,
      gProjectRole,
      gSex,
    );
    request
      .post('/studentManage/admin/AddStudent', {
        classInfoId: gClassInfoId,
        email: gMailBox,
        gender: gSex,
        gradeKey: gGrade,
        role: gProjectRole,
        studentAccount: gNumber,
        studentCardId: gNumberId,
        studentName: gStudentName,
        tel: gTelNumber,
      })
      .then((res) => {
        console.log('请求成功了', res);
        if (res.message == '成功') {
          alert('新增成功！');
        } else {
          alert('新增失败！');
        }
      })
      .catch((err) => console.log(err));
  };

  return (
    <div>
      <Form {...formItemLayout}>
        <div style={{ marginLeft: '8px', float: 'left', width: '1400px' }}>
          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item label="学员姓名：" rules={[{ required: true }]}>
              <Input
                onChange={(e, index) => {
                  // console.log(e.target.value)

                  setgStudentName(e.target.value);
                }}
              ></Input>
            </Form.Item>
            <Form.Item label="邮箱" rules={[{ required: true }]}>
              <Input
                onChange={(e, index) => {
                  // console.log(e.target.value)

                  setgMailBox(e.target.value);
                }}
              ></Input>
            </Form.Item>
            <Form.Item label="性别：" rules={[{ required: true }]}>
              <Select
                placeholder="请选择"
                onChange={(e, index) => {
                  // console.log(index.value)
                  setgSex(index.value);
                }}
                allowClear
              >
                <Option value="0">男</Option>
                <Option value="1">女</Option>
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item label="学号：" rules={[{ required: true }]}>
              <Input
                onChange={(e, index) => {
                  // console.log(e.target.value)

                  setgNumber(e.target.value);
                }}
              ></Input>
            </Form.Item>
            <Form.Item label="手机号：" rules={[{ required: true }]}>
              <Input
                onChange={(e, index) => {
                  // console.log(e.target.value)
                  setgTelNumber(e.target.value);
                }}
              ></Input>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item label="身份证号：" rules={[{ required: true }]}>
              <Input
                onChange={(e, index) => {
                  // console.log(e.target.value)

                  setgNumberId(e.target.value);
                }}
              ></Input>
            </Form.Item>
            <Form.Item label="项目角色：" rules={[{ required: true }]}>
              <Select
                placeholder="请选择"
                onChange={(e, index) => {
                  // console.log(parseInt(index.key))

                  setgProjectRole(parseInt(index.key));
                }}
                allowClear
              >
                {ProjectRole.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.id}>
                      {cNameObj.roleName}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
            <Form.Item {...tailLayout}>
              <div style={{ float: 'left', width: '50px', marginLeft: '10px' }}>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
              </div>
            </Form.Item>
          </div>
          <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
            <Form.Item {...tailLayout}>
              <div style={{ float: 'left', width: '50px', marginLeft: '30px' }}>
                <Button type="default" htmlType="submit">
                  重置
                </Button>
              </div>
            </Form.Item>
          </div>

          <div style={{ clear: 'left', width: '50px' }}></div>

          <div style={{ float: 'left', width: '50px', marginLeft: '0px' }}>
            <Form.Item {...tailLayout}>
              <Button type="primary" onClick={submit}>
                +新增
              </Button>
            </Form.Item>
          </div>
          <div style={{ float: 'left', width: '50px', marginLeft: '35px' }}>
            <Form.Item {...tailLayout}>
              <Button type="default" htmlType="submit">
                批量删除
              </Button>
            </Form.Item>
          </div>
        </div>
      </Form>

      <div
        style={{
          marginLeft: '8px',
          float: 'left',
          height: '50px',
          width: '100%',
          backgroundColor: '#ebf6f7 ',
        }}
      >
        <div style={{ marginTop: '8px' }}>
          <Button type="text">已选择4项</Button>
          <Button type="link">清空</Button>
        </div>
      </div>
      {/* 表格 */}
      <div style={{ marginLeft: '8px' }}>
        <Table columns={columns2} dataSource={Data2} scroll={{ x: 1300 }} />
      </div>
    </div>
  );
};

export default xygl;
